//获取操作对象
var lists = document.querySelector(".contianer")
var uls = document.querySelector(".contianer").querySelector("ul")
var pagination1 = document.querySelector('.pagination1');
/* console.log(lists)
console.log(pagination1) */

(async function () {
    //获取所有数据
    var txt = await PromiseAjax({
        url: '../php/list.php'
    })
    // console.log(txt)
    //把字符串转为数组对象
    var ar1 = eval('(' + txt + ')');
    // console.log(ar1)
    //创建分页器的参数对象
    var o1 = {
        pageInfo: {
            pagenum: 1,
            pagesize: 10,
            totalsize: ar1.length,
            totalpage: Math.ceil(ar1.length / 10)
        }
    }
    //创建实例化对象
    new Pagination(pagination1, o1, (m) => {
        // console.log(m)
        //获取当前页所对应的数据
        var ar2 = ar1.slice((m - 1) * 10, m * 10)
        //拼接所有内容
        var str = ''
        //遍历数组对象
        ar2.forEach(item => {
            // console.log(item)
            str += `
            <li class="row">
                <dl class="clearfix">
                    <dt>
                        <a href="#">
                            <img src="${item.src}" width="200" height="200" alt="">
                        </a>
                    </dt>
                    <dd class="summary">
                        <h2>
                            <a href="./xiangqing.html?id=${item.id}" data-id="${item.id}">${item.title}</a>
                        </h2>
                        <div class="longTitle">${item.name}</div>
                        <p class="price">${item.price}</p>
                    </dd>
                    <dd class="btn_add">
                        <ul>
                            <li class="btn_addCart">
                                <a href="./xiangqing.html?id=${item.id}" data-id="${item.id}">商品详情</a>
                            </li>
                            <li class="btn_addFav">
                                <a href="#">加入收藏</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </li>
            `
        })
        //把拼接好的内容渲染到页面中
        uls.innerHTML=str
    })
})()